﻿@page "/forms/inputgroup"

<Pager Title="Input Group" Description="Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs."
 Indicates="@(new[]{"Example","Sizing","Checkboxes and radios","Multiple inputs","Multiple addons","Button addons",
"Buttons with dropdowns","Segmented buttons","Custom select"})">
 	<Demo Title="Example">
		<Description>

		</Description>
		<Run>
			<FormInputGroup>
				<FormInputGroupText>@@</FormInputGroupText>
				<FormInputText @bind-Value="UserName" placeholder="UserName"/>
			</FormInputGroup>
			<br />
			
			<FormInputGroup>
				<FormInputText @bind-Value="Email" placeholder="Your email"/>
				<FormInputGroupText>@@example.com</FormInputGroupText>
			</FormInputGroup>
			<br />
			<FormInputGroup>
				<FormInputGroupText>$</FormInputGroupText>
				<FormInputText @bind-Value="Money"/>
				<FormInputGroupText>.00</FormInputGroupText>
			</FormInputGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputGroup>
	<FormInputGroupText>@</FormInputGroupText>
	<FormInputText bind-Value=""UserName"" placeholder=""UserName""/>
</FormInputGroup>
			
<FormInputGroup>
	<FormInputText bind-Value=""Email"" placeholder=""Your email""/>
	<FormInputGroupText>@example.com</FormInputGroupText>
</FormInputGroup>

<FormInputGroup>
	<FormInputGroupText>$</FormInputGroupText>
	<FormInputText bind-Value=""Money""/>
	<FormInputGroupText>.00</FormInputGroupText>
</FormInputGroup>
```
			")
		</Code>
	</Demo>
		<Demo Title="Sizing">
		<Description>
			Add the relative form <code>Size</code> parameter to the <code>FormInputGroup</code> itself and contents within will automatically resize
			—no need for repeating the form control size on each element.
		</Description>
		<Run>
			<FormInputGroup Size="Size.Small">
				<FormInputGroupText>Small size</FormInputGroupText>
				<FormInputText @bind-Value="UserName" placeholder="UserName"/>
			</FormInputGroup>
			<br />
			
			<FormInputGroup>
				<FormInputGroupText>Default size</FormInputGroupText>
				<FormInputText @bind-Value="UserName" placeholder="UserName"/>
			</FormInputGroup>
			<br />
			<FormInputGroup Size="Size.Large">
				<FormInputGroupText>Large size</FormInputGroupText>
				<FormInputText @bind-Value="UserName" placeholder="UserName"/>
			</FormInputGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputGroup Size=""Size.Small"">
	<FormInputGroupText>Small size</FormInputGroupText>
	<FormInputText bind-Value=""UserName"" placeholder=""UserName""/>
</FormInputGroup>
<br />
			
<FormInputGroup>
	<FormInputGroupText>Default size</FormInputGroupText>
	<FormInputText bind-Value=""UserName"" placeholder=""UserName""/>
</FormInputGroup>
<br />
<FormInputGroup Size=""Size.Large"">
	<FormInputGroupText>Large size</FormInputGroupText>
	<FormInputText bind-Value=""UserName"" placeholder=""UserName""/>
</FormInputGroup>
```
			")
		</Code>
	</Demo>
		<Demo Title="Checkboxes and radios">
		<Description>

		</Description>
		<Run>
			<FormInputGroup>
				<FormInputGroupText>
					<FormInputCheckbox @bind-Value="GroupCheckbox"/>
				</FormInputGroupText>
				<FormInputText @bind-Value="Email"/>
			</FormInputGroup>
			<br />
			<FormInputRadioGroup @bind-Value="GroupRadio">
				<FormInputGroup>
					<FormInputGroupText>
						<FormInputRadio Value="@("Apple")"/>
					</FormInputGroupText>
					<FormInputText @bind-Value="Email"/>
					<FormInputGroupText>
						<FormInputRadio Value="@("Banana")"/>
					</FormInputGroupText>
					<FormInputText @bind-Value="Money"/>
				</FormInputGroup>
			</FormInputRadioGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputGroup>
	<FormInputGroupText>
		<FormInputCheckbox bind-Value=""GroupCheckbox""/>
	</FormInputGroupText>
	<FormInputText bind-Value=""Email""/>
</FormInputGroup>

<FormInputRadioGroup bind-Value=""GroupRadio"">
	<FormInputGroup>
		<FormInputGroupText>
			<FormInputRadio Value=""@(""Apple"")""/>
		</FormInputGroupText>
		<FormInputText bind-Value=""Email""/>
		<FormInputGroupText>
			<FormInputRadio Value=""@(""Banana"")""/>
		</FormInputGroupText>
		<FormInputText bind-Value=""Money""/>
	</FormInputGroup>
</FormInputRadioGroup>
```
			")
		</Code>
	</Demo>
	<Demo Title="Multiple inputs">
		<Description>
			While multiple &lt;input>s are supported visually, validation styles are only available for input groups with a single &lt;input>.
		</Description>
		<Run>
			<FormInputGroup>
				<FormInputGroupText>First and last name</FormInputGroupText>
				<FormInputText @bind-Value="FirstName"/>
				<FormInputText @bind-Value="LastName"/>
			</FormInputGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputGroup>
	<FormInputGroupText>First and last name</FormInputGroupText>
	<FormInputText bind-Value=""FirstName""/>
	<FormInputText bind-Value=""LastName""/>
</FormInputGroup>
```
			")
		</Code>
	</Demo>
	<Demo Title="Multiple addons">
		<Description>
			Multiple add-ons are supported and can be mixed with checkbox and radio input versions.
		</Description>
		<Run>
			<FormInputGroup>
				<FormInputGroupText>$</FormInputGroupText>
				<FormInputGroupText>0.00</FormInputGroupText>
				<FormInputText @bind-Value="Money"/>
			</FormInputGroup>
			<br/>
			<FormInputGroup>
				<FormInputText @bind-Value="Money"/>
				<FormInputGroupText>$</FormInputGroupText>
				<FormInputGroupText>0.00</FormInputGroupText>
			</FormInputGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputGroup>
	<FormInputGroupText>$</FormInputGroupText>
	<FormInputGroupText>0.00</FormInputGroupText>
	<FormInputText bind-Value=""Money""/>
</FormInputGroup>
<br/>
<FormInputGroup>
	<FormInputText bind-Value=""Money""/>
	<FormInputGroupText>$</FormInputGroupText>
	<FormInputGroupText>0.00</FormInputGroupText>
</FormInputGroup>
```
			")
		</Code>
	</Demo>
	<Demo Title="Button addons">
		<Description>

		</Description>
		<Run>
			<FormInputGroup>
				<Button Color="Color.Primary">Button</Button>
				<FormInputText @bind-Value="UserName"/>
			</FormInputGroup>
			<br/>
			<FormInputGroup>
				<FormInputText @bind-Value="UserName"/>
				<Button Color="Color.Primary" Outline>Button</Button>
			</FormInputGroup>
			<br/>
			<FormInputGroup>
				<Button Color="Color.Success" Outline>Button</Button>
				<FormInputText @bind-Value="UserName"/>
				<Button Color="Color.Danger">Button</Button>
			</FormInputGroup>
			<br/>
			<FormInputGroup>
				<FormInputText @bind-Value="UserName"/>
				<Button Color="Color.Info" Outline>Button</Button>
				<Button Color="Color.Secondary" Outline>Button</Button>
			</FormInputGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputGroup>
	<Button Color=""Color.Primary"">Button</Button>
	<FormInputText @bind-Value=""UserName""/>
</FormInputGroup>

<FormInputGroup>
	<FormInputText @bind-Value=""UserName""/>
	<Button Color=""Color.Primary"" Outline>Button</Button>
</FormInputGroup>

<FormInputGroup>
	<Button Color=""Color.Success"" Outline>Button</Button>
	<FormInputText @bind-Value=""UserName""/>
	<Button Color=""Color.Danger"">Button</Button>
</FormInputGroup>

<FormInputGroup>
	<FormInputText @bind-Value=""UserName""/>
	<Button Color=""Color.Info"" Outline>Button</Button>
	<Button Color=""Color.Secondary"" Outline>Button</Button>
</FormInputGroup>
```
			")
		</Code>
	</Demo>
		<Demo Title="Buttons with dropdowns">
		<Description>
			
		</Description>
		<Run>
			<FormInputGroup>
				<DropDown>
					<Button Outline DropDown Color="Color.Primary">
							Dropdown
					</Button>				
					<DropDownMenu>
						<DropDownLinkItem href="#">Action</DropDownLinkItem>
						<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
						<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
						<DropDownDividerItem />
					</DropDownMenu>
				</DropDown>
				<FormInputText @bind-Value="Email" placeholder="Put your email here"/>
			</FormInputGroup>
			<br/>
			<FormInputGroup>
				<FormInputText @bind-Value="Email" placeholder="Put your email here"/>
				<DropDown>
					<Button Outline DropDown Color="Color.Secondary">
							Dropdown
					</Button>				
					<DropDownMenu>
						<DropDownLinkItem href="#">Action</DropDownLinkItem>
						<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
						<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
						<DropDownDividerItem />
					</DropDownMenu>
				</DropDown>
			</FormInputGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputGroup>
	<DropDown>
		<Button Outline DropDown Color=""Color.Primary"">
				Dropdown
		</Button>				
		<DropDownMenu>
			<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
			<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
			<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
			<DropDownDividerItem />
		</DropDownMenu>
	</DropDown>
	<FormInputText bind-Value=""Email"" placeholder=""Put your email here""/>
</FormInputGroup>

<FormInputGroup>
	<FormInputText bind-Value=""Email"" placeholder=""Put your email here""/>
	<DropDown>
		<Button Outline DropDown Color=""Color.Secondary"">
				Dropdown
		</Button>				
		<DropDownMenu>
			<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
			<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
			<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
			<DropDownDividerItem />
		</DropDownMenu>
	</DropDown>
</FormInputGroup>
```
			")
		</Code>
	</Demo>
	<Demo Title="Segmented buttons">
		<Description>
			
		</Description>
		<Run>
			<FormInputGroup>
					<Button Outline Color="Color.Primary">Action</Button>
					<Button Outline DropDown DropDownSplit Color="Color.Primary">						
						<Element TagName="span" CssClass="Css.Class.VisuallyHidden()">Split</Element>
					</Button>
					<DropDownMenu>
						<DropDownLinkItem href="#">Action</DropDownLinkItem>
						<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
						<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
						<DropDownDividerItem />
					</DropDownMenu>
				<FormInputText @bind-Value="Email" placeholder="Put your email here"/>
			</FormInputGroup>
			<br/>
			<FormInputGroup>
				<FormInputText @bind-Value="Email" placeholder="Put your email here"/>
					<Button Outline Color="Color.Secondary">Action</Button>
					<Button Outline DropDown DropDownSplit Color="Color.Secondary">					
						<Element TagName="span" CssClass="Css.Class.VisuallyHidden()">Split</Element>
					</Button>
					<DropDownMenu>
						<DropDownLinkItem href="#">Action</DropDownLinkItem>
						<DropDownLinkItem href="#">Another Action</DropDownLinkItem>
						<DropDownLinkItem href="#">Something else here</DropDownLinkItem>
						<DropDownDividerItem />
					</DropDownMenu>
			</FormInputGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputGroup>
	<Button Outline Color=""Color.Secondary"">Action</Button>
	<Button Outline DropDown DropDownSplit Color=""Color.Secondary"">					
		<Element TagName=""span"" CssClass=""Css.Class.VisuallyHidden()"">Split</Element>
	</Button>
	<DropDownMenu>
		<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
		<DropDownDividerItem />
	</DropDownMenu>
	<FormInputText bind-Value=""Email"" placeholder=""Put your email here""/>
</FormInputGroup>

<FormInputGroup>
	<FormInputText bind-Value=""Email"" placeholder=""Put your email here""/>
	<Button Outline Color=""Color.Secondary"">Action</Button>
	<Button Outline DropDown DropDownSplit Color=""Color.Secondary"">
		<Element TagName=""span"" CssClass=""Css.Class.VisuallyHidden()"">Split</Element>
	</Button>
	<DropDownMenu>
		<DropDownLinkItem href=""#"">Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Another Action</DropDownLinkItem>
		<DropDownLinkItem href=""#"">Something else here</DropDownLinkItem>
		<DropDownDividerItem />
	</DropDownMenu>
</FormInputGroup>
```
			")
		</Code>
	</Demo>
		<Demo Title="Custom select">
		<Description>

		</Description>
		<Run>
			<FormInputGroup>
				<FormInputGroupText>Options</FormInputGroupText>
				<FormSelect>
					<option selected>Choose...</option>
					<option>One</option>
					<option>Two</option>
					<option>Three</option>
				</FormSelect>
			</FormInputGroup>
			<br />
			<FormInputGroup>
				<FormSelect>
					<option selected>Choose...</option>
					<option>One</option>
					<option>Two</option>
					<option>Three</option>
				</FormSelect>
				<FormInputGroupText>Options</FormInputGroupText>
			</FormInputGroup>
			<br />
			<FormInputGroup>
				<Button Color="Color.Success">Button</Button>
				<FormSelect>
					<option selected>Choose...</option>
					<option>One</option>
					<option>Two</option>
					<option>Three</option>
				</FormSelect>
			</FormInputGroup>
			<br />
			<FormInputGroup>
				<FormSelect>
					<option selected>Choose...</option>
					<option>One</option>
					<option>Two</option>
					<option>Three</option>
				</FormSelect>
				<Button Color="Color.Dark" Outline>Button</Button>
			</FormInputGroup>
		</Run>
		<Code>
			@MD.Write(@"
```html
<FormInputGroup>
	<FormInputGroupText>Options</FormInputGroupText>
	<FormSelect>
		<option selected>Choose...</option>
		<option>One</option>
		<option>Two</option>
		<option>Three</option>
	</FormSelect>
</FormInputGroup>

<FormInputGroup>
	<FormSelect>
		<option selected>Choose...</option>
		<option>One</option>
		<option>Two</option>
		<option>Three</option>
	</FormSelect>
	<FormInputGroupText>Options</FormInputGroupText>
</FormInputGroup>

<FormInputGroup>
	<Button Color=""Color.Success"">Button</Button>
	<FormSelect>
		<option selected>Choose...</option>
		<option>One</option>
		<option>Two</option>
		<option>Three</option>
	</FormSelect>
</FormInputGroup>

<FormInputGroup>
	<FormSelect>
		<option selected>Choose...</option>
		<option>One</option>
		<option>Two</option>
		<option>Three</option>
	</FormSelect>
	<Button Color=""Color.Dark"" Outline>Button</Button>
</FormInputGroup>
```
			")
		</Code>
	</Demo>
</Pager>
@code{
	string UserName{ get;set; }
	string Email { get; set; }
	int Money { get; set; }
	bool GroupCheckbox { get; set; }
	string GroupRadio { get; set; }
	string FirstName { get; set; }
	string LastName { get; set; }
}